<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/css/category.css">
  <style>
    .blue-background-class {
      background-color: #C8EBFB;
    }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo"></div>
  <div class="layui-side layui-bg-black"></div>
  <!-- content start -->
  <div class="layui-body" style="padding-left: 10px; padding-right: 10px; margin-top: 30px;">
    <!-- *************** 分割线 ****************** -->
    <div  id="categoryApp">
      <div class="demoTable">
        <div class="layui-input-inline">
          <button class="layui-btn layui-btn-normal layui-btn-small" @click="handleToolbarAddClick">+添加分类</button>
        </div>
        <span style="color: #999; margin-left: 10px">可拖拽进行排序 <span style="color: #ccc">(同级之间)</span></span>
      </div>

      <form class="layui-form">
        <div class="layui-inline">
          <label class="layui-form-label">下拉选择框</label>
          <div class="layui-input-block">
            <select name="company" lay-filter="company">
              <option value="0">全部</option>
              <option value="1">写作</option>
              <option value="2">阅读</option>
            </select>
          </div>
        </div>
      </form>

      <div class="xh-cd-main">
        <ul class="category-table">
          <li class="category-table-head">
            <div class="row layui-row">
              <div class="td layui-col-md9">名称</div>
              <div class="td layui-col-md3">操作</div>
            </div>
          </li>
          <li class="category-table-body">
            <ul class="list-table" v-if="isLoadedData">
              <draggable v-model="treeData"
                         draggable="li" @change="handleSortChange">
              <category-node v-for="category in treeData"
                             :key="category.id"
                             :category="category"
                             @update-data="handleUpdateData"
                             @sort-change="handleSortChange">
              </category-node>
              </draggable>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- *************** 分割线 ****************** -->
  </div>
</div>
<!-- 节点模板 -->
<!--v-for="category in categoryList" :key="category.id"-->
<script type="text/tpl" id="categoryNode">
<li class="tr">
  <div class="row row-expand layui-row">
    <div class="td layui-col-md9 name" :style="!category.isLeaf ? {'padding-left': (category.level * 30) + 'px'} : {'padding-left': '80px'}">
      <i class="layui-icon tree-icon"
         :class="isOpen ? 'layui-icon-down' : 'layui-icon-right'"
         v-if="!category.isLeaf"
         @click="handleOpenClick"></i>{{category.label}}
    </div>
    <div class="td layui-col-md3 operation">
      <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs"
         :class="{'layui-btn-disabled': !category.editable}"
          @click="handleEditClick(category)">
        <i class="layui-icon layui-icon-edit"></i>编辑
      </a>
      <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs"
         :class="{'layui-btn-disabled': !category.editable}"
         @click="handleDeleteClick(category)">
        <i class="layui-icon layui-icon-edit"></i>删除
      </a>
      <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs"
         v-if="!category.isLeaf"
         @click="handleAddClick(category)">
        <i class="layui-icon layui-icon-add-1"></i>添加子分类
      </a>
    </div>
  </div>
  <ul class="list-table" v-show="isOpen">
  <draggable v-model="category.children"
            :options="{animation: 150, ghostClass: 'blue-background-class'}"
             v-if="category.children && category.children.length"
             draggable="li" @change="handleSortChange">
    <category-node :category="item"
                  v-for="item in category.children"
                 :key="item.id"
                 @update-data="handleUpdateData"
                 @sort-change="handleSortChange">
    </category-node>
  </draggable>
  </ul>
</li>
</script>
<!-- 添加/修改分类 -->
<script type="text/html" id="addCategory">
  <form class="layui-form" style="padding: 30px 60px 20px 0">
    <div class="layui-form-item">
      <label class="layui-form-label">名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请填写分类名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">简介</label>
      <div class="layui-input-block">
        <!--<input type="text" name="intro" required lay-verify="required" placeholder="请填写简介" autocomplete="off" class="layui-input">-->
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit style="width: 100px;" lay-filter="addCategoryForm">确定</button>
      </div>
    </div>
  </form>
</script>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/vue.min.js"></script>
<script src="../dist/lib/lodash.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/lib/Sortable.min.js"></script>
<script src="../dist/lib/vuedraggable.umd.js"></script>
<script src="../dist/js/category.js"></script>
</body>
</html>